<template>
	<view class="myAnswer">
		<view class="">
			<van-tabs active="a" @change="onChange" line-width="40rpx" color="black">
				<template #nav-left>
					<view style="width: 30px;display: flex; align-items: center; justify-content: center;">
						<van-icon size="20px"  name="arrow-left" @click="leftHandler" />
					</view>
				</template>
				<template #nav-right>
					<image class="img" src="../../../static/分类查看.png" mode="" @click="showPopup" ></image>
				</template>
				<van-search
				  :value="value"
				  shape="round"
				  background="#EDEDED"
				  placeholder="搜索"
					@search="serchHadnler"
				/>
			  <van-tab title="全部" name="a">
					<view class="van-tab-view">
						<view class="van-tab-view-vw" v-for="item in 8">
							<view class="van-tab-view-vw-content">
								<view class="van-tab-view-vw-content-top">
									<view class="van-tab-view-vw-content-top-vw">
										<image src="../../../static/头像.png" mode="" style="width: 40rpx; height: 40rpx;"></image>
										<text>微信用户</text>
									</view>
									<text>已完成</text>
								</view>
								<view class="van-tab-view-vw-content-middle">
									<image src="../../../static/带背景短信.png" mode=""></image>
									<text>股权转让纠纷是什么？相关证明材料是什么?</text>
								</view>
								<text>04-23 08:47</text>
							</view>
						</view>
					</view>
				</van-tab>
			  <van-tab title="待解答" name="b">内容 2</van-tab>
			  <van-tab title="未到期" name="c">内容 3</van-tab>
			  <van-tab title="收藏" name="d">内容 4</van-tab>
				<van-tab title="申诉" name="e">内容 5</van-tab>
				<van-tab title="售后" name="f">内容 6</van-tab>
			</van-tabs>
		</view>
		<van-popup
		  :show="show"
		  position="bottom"
			closeable
			round
		  custom-style="height: 40%; background-color: #EDEDED;"
		  @close="onClose">
			<view class="van-popup">
				<text>按分类查看</text>
				<view class="van-popup-view">
					<view class="van-popup-view-vw">
						<image src="../../../static/白背章.png" mode=""></image>
						<text>全部</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白咨询.png" mode=""></image>
						<text>免费咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白私问.png" mode=""></image>
						<text>私问</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白电话.png" mode=""></image>
						<text>电话咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白律师.png" mode=""></image>
						<text>律师约见</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白背章.png" mode=""></image>
						<text>合同审查</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白文书.png" mode=""></image>
						<text>文书代写</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白律师函.png" mode=""></image>
						<text>律师函</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白户籍.png" mode=""></image>
						<text>户籍调查</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白起诉状.png" mode=""></image>
						<text>民事起诉状</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白离婚.png" mode=""></image>
						<text>离婚咨询</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白仲裁.png" mode=""></image>
						<text>劳动仲裁委托</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白委托.png" mode=""></image>
						<text>委托律师</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白工伤.png" mode=""></image>
						<text>工伤赔偿</text>
					</view>
					<view class="van-popup-view-vw">
						<image src="../../../static/白协议.png" mode=""></image>
						<text>合伙协议</text>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import { rushList } from '../../../utils/utils';
	export default {
		data() {
			return {
				active: 1, // 标签页默认选中
				value: '', // 搜索栏输入内容
				show: false, // 模态框状态
			}
		},
		onLoad() {
		},
		methods: {
			// 标签页切换
			onChange (e) {
				console.log(e.target);
			},
			// 搜索栏确定事件
			serchHadnler (event) {
				console.log(event.detail);
			},
			// 打开模态框
			showPopup() {
				this.show = true;
				// console.log(this.setData);
			},
			// 关闭模态框
			onClose() {
				this.show = false;
			},
			// 标签页左侧箭头
			leftHandler () {
				uni.navigateBack(-1)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 40rpx; 
		height: 40rpx;
		margin-top: 24rpx;
		font-weight: bold;
	}
	
	.van-tab-view {
		background-color: #EDEDED;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.van-tab-view-vw {
		width: 95%;
		height: 220rpx;
		border-radius: 24rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.van-tab-view-vw-content {
		width: 92%;
		height: 90%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.van-tab-view-vw-content > text {
		color: #b9b9b9;
		font-size: 24rpx;
		margin-left: 86rpx;
	}
	
	.van-tab-view-vw-content-top-vw {
		display: flex;
		align-items: center;
	}
	.van-tab-view-vw-content-top-vw > text {
		font-weight: bold;
		margin-left: 24rpx;
	}
	.van-tab-view-vw-content-top > text {
		color: red;
		font-weight: bold;
	}
	.van-tab-view-vw-content-top {
		display: flex;
		justify-content: space-between;
	}
	
	.van-tab-view-vw-content-middle > image {
		width: 60rpx;
		height: 90rpx;
	}
	.van-tab-view-vw-content-middle {
		display: flex;
		justify-content: space-between;
	}
	.van-tab-view-vw-content-middle > text {
		margin-left: 30rpx;
	}
	
	.van-popup {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.van-popup > text {
		font-size: 28rpx;
		margin-top: 40rpx;
	}
	.van-popup > .van-popup-view {
		width: 91%;
		height: 91%;
	}
	.van-popup-view {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	.van-popup-view-vw > image {
		width: 84rpx;
		height: 84rpx;
	}
	.van-popup-view-vw {
		width: 20%;
		height: 128rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}
	.van-popup-view :nth-child(12) > text {
		width: 144rpx;
	}
	
	.van-popup-view-vw > text {
		font-size: 24rpx;
	}
</style>
